import { defineComponent, ref, reactive } from 'vue';
import MyCount from './MyCount';
export default defineComponent({
  name: 'About',
  components: { MyCount,  },
  setup() {
    // ref 和reactive 不要重新定义给同一个值， 这样的赋值方式，是相当于重新定义了一个新值
    const num = ref(1);
    const paretNum = reactive({ num: 0 });
    const onCountClick = (val: any) => {
      console.log(val);
      paretNum.num = val.num;
      console.log(paretNum); // 打印子组件向父组件传递的值
    };
    return () => (
      <>
        <div>
          <div>引用子组件：</div>
          <div>子组件向父组件传递的值：{paretNum.num}</div>
          {/* 组件名最好用小写，遇到驼峰大写 改用 '-' 进行连接*/}
          <my-count num={num.value} onMycount={onCountClick} />
        </div>
      </>
    );
  },
});
